<template>
	<view>
		<scroll-view @scrolltolower="onLower" @scroll="handleScroll" :scroll-y="true" :style="{height: scrollViewHeight}">
			<u-navbar :title="adoptSetUp.adoptTitle" :border="border" leftIconSize="0" :bgColor="bgColor" :titleStyle="{color: color}">
			</u-navbar>
			<view class="foster-header">
				<u--image mode="aspectFill" :src="adoptSetUp.adoptBanner[0].url" width="100%" :height="header.height"></u--image>
				<view v-if="adoptSetUp.adoptScroll === '1' && rollList.length > 0" class="header-news" :style="{backgroundColor: appColor}">
					<swiper :vertical="true" class="swiper" circular :indicator-dots="false" :autoplay="true">
						<swiper-item v-for="(item, index) in rollList" :key="index">
							<view class="swiper-item">
								<u--image shape="circle" mode="aspectFill" :src="item.avatar" width="40rpx" height="40rpx"></u--image>
								<view style="width: 12rpx;"/>
								<view class="header-news-content">{{item.nickName}}认养了{{item.adoptSku.sku + item.buyCount + item.unit}}</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="foster-content">
				<u-sticky bgColor="#fff" :customNavHeight="customNavHeight">
					<u-tabs @click="tabClick" :current="curCategory" :lineColor="appColor" :activeStyle="{color: appColor}" :list="adoptSetUp.categoryList"></u-tabs>
					<view class="index-box">
						<view v-for="tag in tagList" :key="tag.key" @click="changeTag(tag)" class="index-item" :style="{backgroundColor: curIndex === tag.key ? appColor : 'transparent', color: curIndex === tag.key ? '#fff' : '#666'}">{{tag.title}}</view>
					</view>
				</u-sticky>
				<template v-if="loading">
					<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="3" v-for="i in 4" :key="i"></u-skeleton>
				</template>
				<template v-else-if="!loading && dataList.length === 0">
					<u-empty
					    mode="data"
						icon="http://cdn.uviewui.com/uview/empty/data.png"
					>
					</u-empty>
				</template>
				<template v-else-if="!loading && dataList.length > 0">
					<view class="foster-item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item)">
						<text class="foster-item-status" :style="{color: item.isAdopt ? appColor : '#999'}">{{item.isAdopt ? '' : '已结束'}}</text>
						<view class="foster-item-t">
							<u--image mode="aspectFill" :src="appInfo.logo[0].url" width="38rpx" height="34rpx"></u--image>
							<text class="foster-item-t-1">{{appInfo.name}}</text>
							<!-- <view class="foster-item-t-2" :style="{backgroundColor: appColor}">平台自营</view> -->
						</view>
						<view class="foster-item-m">
							<view class="foster-item-m-image">
								<u--image mode="aspectFill" radius="16rpx" :src="item.image[0].url" width="180rpx" height="180rpx"></u--image>
								<view class="foster-item-m-image-title" v-if="item.isDeposit === '1'">预售</view>
								<view class="foster-item-m-image-mask" v-if="item.count === 0">已结束</view>
							</view>
							<view style="width: 32rpx;"/>
							<view class="foster-item-m-r">
								<view class="foster-item-m-r-title">{{item.name}}</view>
								<view style="height: 2rpx;"/>
								<view class="foster-item-m-r-date">种植时间: {{item.launchTime.replaceAll('-', '.')}}</view>
								<view class="foster-item-m-r-date">认养时间: {{item.startTime.replaceAll('-', '.')}}~{{item.endTime.replaceAll('-', '.')}}</view>
								<view style="height: 12rpx;"/>
								<view style="display: flex;align-items: center;">
									<view style="position: relative;flex: 1;">
										<u-line-progress :showText="false" :percentage="item.saleScale" :activeColor="appColor"></u-line-progress>
										<text style="position: absolute;left: 50%;transform: translate(-50%);top: 0; color: #fff;font-size: 18rpx;text-align: center;">已认养{{item.salesNum}}{{item.unit}}</text>
									</view>
									<view style="padding-left: 8rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; color: #000;font-size: 18rpx;text-align: right;">{{item.stock}}{{item.unit}}</view>
								</view>
								<view class="foster-item-m-r-remark">
									<view class="foster-item-m-r-remark-item">
										<view style="display: flex;align-items: center;">
											<text style="font-size: 28rpx;" class="iconfont icon-fenlei"></text>
											<text>品种</text>
										</view>
										<text style="color: #333;">{{item.varieties}}</text>
									</view>
									<view class="foster-item-m-r-remark-item">
										<view style="display: flex;align-items: center;">
											<text class="iconfont icon-biaoshengmingzhouqiguanli"></text>
											<text>周期</text>
										</view>
										<text style="color: #333;">{{item.cycle}}天</text>
									</view>
									<view class="foster-item-m-r-remark-item">
										<view style="display: flex;align-items: center;">
											<text style="color: #fff;" class="iconfont icon-shouruzengchang"></text>
											<text style="color: #fff;">产量</text>
										</view>
										<text style="color: #fff;">{{item.yield}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="foster-item-price">
							<text style="font-size: 32rpx; color: #f40215;padding-right: 4rpx;">{{item.price}}</text>	
							<text>元/{{item.unit}}</text>
						</view>
						<view class="foster-item-b">
							<view class="foster-item-b-l">
								<u-avatar-group
								            :urls="item.avatarList"
								            size="24"
								            gap="0.5"
											:maxCount="3"
								    ></u-avatar-group>
								<view style="width: 8rpx;" v-if="item.avatarList && item.avatarList.length>0" />
								<view style="font-size: 24rpx;color: #666;">已有{{item.avatarList ? item.avatarList.length : 0}}人参与</view>
							</view>
							<view class="foster-item-b-r">
								<view class="foster-item-b-r-btn" :style="{backgroundColor: appColor, opacity: item.isAdopt ? 1 : 0.5}">{{item.isAdopt ? '认养' : '认养结束'}}</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {getAdoptSetUp, getAdoptProject, getAdoptRoll} from '@/api/foster.js';
	import {mapState, mapActions} from 'vuex';
	export default {
		data() {
			return {
				curCategory: 0, // 当前选中项目
				curIndex: 0, //当前选中标签
				header: {
					bgc: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/foster-bgc.png',
					height: '556rpx',
				},
				tagList: [
					{title: '综合', key: 0},
					{title: '销量', key: 1},
					// {title: '距离', key: 2},
					{title: '人气', key: 3},
				],
				color: 'transparent',
				bgColor: 'transparent',
				border: false,
				dataList: [], // 认养列表
				rollList: [], // 认养滚动列表
				loading: true,
				status: 'loadmore',
				pageNo: 1,
				pageSize: 4,
			}
		},
		computed: {
			...mapState(['adoptSetUp', 'appInfo', 'latLng']),
			appColor() {
				return this.appPrimaryColor
			},
			customNavHeight() {
				return this.statusBarHeight + 44 + 'px';
			},
			scrollViewHeight() {
				return this.scrollHeight - 50 - 1 + this.statusBarHeight + 'px';
			}
		},
		created() {
			if(this.adoptSetUp.adoptScroll === '1') {
				getAdoptRoll().then(res => {
					this.rollList = res.result
				})
			}
			this.getAdoptProjectList();
		},
		methods: {
			...mapActions(['setDetail']),
			tabClick({index}) {
				this.curCategory = index;
				this.pageNo = 1;
				this.getAdoptProjectList();
			},
			changeTag({key}) {
				if(this.curIndex === key) return
				this.pageNo = 1;
				this.curIndex = key;
				this.$nextTick(() => {
					this.getAdoptProjectList();
				})
			},
			// 详情页面
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/foster/fosterDetail?id='+item.id
				});
			},
			// 获取认养列表
			getAdoptProjectList() {
				if(this.adoptSetUp.categoryList.length === 0) {
					this.loading = false;
					return
				};
				if(this.pageNo === 1) {
					this.loading = true;
				}
				let postObj = {
					saleType: this.curIndex,
					categoryId: this.adoptSetUp.categoryList[this.curCategory].id,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				if(this.curIndex === 2 && this.latLng) {
					postObj.latLng = this.latLng;
				}
				getAdoptProject(postObj).then(res => {
					const {current, pages, records} = res.result;
					if(this.pageNo === 1) {
						let empty = [];
						this.dataList = empty.concat(records);
					} else {
						this.dataList = this.dataList.concat(records);
					}
					if(current >= pages) {
						this.status = 'nomore'
					} else {
						this.pageNo ++;
						this.status = 'loading'
					}
				}).finally(() => {
					this.loading = false;
				});
			},
			
			handleScroll({detail}) {
				if (detail.scrollTop > 100) {
					this.color = '#000';
					this.bgColor = '#fff';
					this.border = true;
				} else {
					this.color = 'transparent';
					this.bgColor = 'transparent';
					this.border = false;
				}
			},
			onLower() {
				if(this.status === 'loading') {
					this.getAdoptProjectList();
				}
			}
		},
	}
</script>


<style>
	.u-skeleton {
		margin-bottom: 32rpx!important;
	}
</style>
<style lang="scss" scoped>
	
	.foster-header {
		height: 556rpx;
		position: relative;
		
		.header-news {
			width: 400rpx;
			height: 60rpx;
			position: absolute;
			right: 0;
			bottom: 100rpx;
			border-radius: 30rpx 0 0 30rpx;
			padding: 0 16rpx;
			overflow: hidden;
			.swiper {
				width: 400rpx;
				height: 60rpx;
				.swiper-item {
					width: 400rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					.header-news-content {
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 24rpx;
						color: #fff;
					}
				}
			}
		}
	}
		
	.foster-content {
		padding: 16rpx;
		border-radius: 32rpx;
		background-color: #fff;
		// position: relative;
		// top: -32rpx;
		.index-box {
			display: flex;
			height: 72rpx;
			align-items: center;
			padding: 0 16rpx;
			margin: 16rpx 0;
			.index-item {
				height: 48rpx;
				line-height: 48rpx;
				padding: 0 16rpx;
				margin-right: 16rpx;
				color: #666;
				font-size: 26rpx;
				border-radius: 8rpx;
			}
		}
		.foster-item {
			padding: 32rpx;
			border-radius: 16rpx;
			box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.19);
			margin-bottom: 16rpx;
			position: relative;
			.foster-item-status {
				position: absolute;
				right: 8rpx;
				font-size: 28rpx;
				top: 28rpx;
				transform: rotate(45deg);
			}
			.foster-item-t {
				display: flex;
				align-items: center;
				.foster-item-t-1 {
					color: #333;
					font-size: 30rpx;
					padding: 0 12rpx;
					font-weight: bold;
					width: 240rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.foster-item-t-2 {
					height: 36rpx;
					line-height: 36rpx;
					padding: 4rpx 8rpx;
					color: #fff;
					font-size: 24rpx;
					border-radius: 8rpx;

				}
			}
			.foster-item-m {
				margin: 16rpx 0;
				display: flex;
				.foster-item-m-image {
					width: 180rpx;
					height: 180rpx;
					position: relative;
					overflow: hidden;
					.foster-item-m-image-mask {
						width: 180rpx;
						position: absolute;
						left: 0;
						top: 0;
						background: rgba(0, 0, 0, .4);
						color: #fff;
						font-size: 28rpx;
						text-align: center;
						height: 180rpx;
						line-height: 180rpx;
					}
					.foster-item-m-image-title {
						height: 36rpx;
						line-height: 36rpx;
						padding: 4rpx 8rpx;
						color: #fff;
						font-size: 24rpx;
						border-radius: 8rpx;
						position: absolute;
						left: 0;
						top: 0;
						background-color: #f40215;
					}
				}
				.foster-item-m-r {
					flex: 1;
					height: 180rpx;
					.foster-item-m-r-title {
						color: #333;
						font-size: 28rpx;
						line-height: 28rpx;
						font-weight: bold;
					}
					.foster-item-m-r-date {
						color: #969696;
						font-size: 24rpx;
						line-height: 24rpx;
						padding-top: 10rpx;
					}
					.foster-item-m-r-remark {
						display: flex;
						align-items: center;
						justify-content: space-between;
						.foster-item-m-r-remark-item {
							display: flex;
							padding-top: 10rpx;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							color: #666;
							font-size: 24rpx;
						}
					}
				}
			}
				
			.foster-item-price {
				color: #969696;
				font-size: 24rpx;
			}
			.foster-item-b {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.foster-item-b-l {
					display: flex;
					align-items: center;
					.foster-item-b-l-item {
						display: flex;
						align-items: center;
						color: #666;
						font-size: 24rpx;
						margin-right: 16rpx;
						.foster-item-b-l-item-text {
							padding-left: 4rpx;
						}
					}
				}
				.foster-item-b-r-btn {
					width: 160rpx;
					height: 60rpx;
					border-radius: 30rpx;
					color: #fff;
					line-height: 60rpx;
					font-size: 28rpx;
					text-align: center;
				}
			}
		}
	}
</style>
